<template>
  <div>
    <div v-for="(item, index) in testary" :key="index">
      {{ item }}
    </div>
    <hr />
    <p>pageRoute: #/clearAryAndObj</p>
    <br />
    <hr />

    <div class="example">
      <p>示例一</p>
      <p>
        ary--》 {{ ary }} &nbsp;<button @click="clearAry">清空ary</button>
        &nbsp;<button @click="changeAry2">修改一个索引为2</button>
      </p>
    </div>
    <hr />
    <div class="example">
      <p>示例二</p>
      <form action="#">
        <input
          type="text"
          placeholder="username"
          name="username"
          v-model="obj.username"
        /><br /><br />
        <input
          type="text"
          placeholder="password"
          name="password"
          v-model="obj.password"
        /><br /><br />
        性别:
        <label for="boy">
          男：<input
            type="radio"
            name="sex"
            v-model="obj.sex"
            id="boy"
            value="1"
        /></label>
        &nbsp;
        <label for="girl"
          >女:
          <input
            type="radio"
            name="sex"
            v-model="obj.sex"
            value="0"
            id="girl" /><br /><br
        /></label>
        <button type="submit" @click.prevent="subInfo">
          提交（阻止了默认表单提交）
        </button>
        <button type="reset" @click="resetObj">重置</button>
      </form>
    </div>
    <br />
    <hr />
    <div>最后要提交的数据：</div>
    <pre id="finialData"></pre>
    <br />
    <hr />

    <div class="example">
      <p>表单绑定示例(双向绑定)</p>
      <button
        @click="
          () => {
            isVirable = !isVirable
          }
        "
      >
        是否显示表单绑定示例(双向绑定)
      </button>
      <someFormExample v-show="isVirable"></someFormExample>
    </div>
  </div>
</template>
<script>
import someFormExample from './表单绑定示例.vue'
export default {
  name: 'clearAryAndObj',
  components: {
    someFormExample
  },
  data() {
    return {
      testary: [1, 2, 3],
      ary: ['a', 'b', 'c'],
      obj: {
        username: '',
        password: '',
        sex: '1'
      },
      isVirable: false
    }
  },
  mounted() {
    // mounted时候修改数组的数据
    this.testAryMethod()
  },
  methods: {
    testAryMethod() {
      setTimeout(() => {
        const length = this.testary.length
        this.testary.splice(0, length)
        this.testary = [3, 4, 5]
      }, 2000)
    },
    changeAry2() {
      // this.ary[2] = '6666'
      this.$set(this.ary, '2', '6666')
    },
    clearAry() {
      const length = this.ary.length
      // for (let i = 0; i < length; i++) {
      //   this.$delete(this.ary, 0)
      // }
      this.ary.splice(0, length)
      console.log(this.ary)
    },
    subInfo() {
      console.log(this.obj)
      const preEle1 = document.getElementById('finialData')
      preEle1.innerHTML = JSON.stringify(this.obj, null, 4)
    },
    // 重置对象的值
    resetObj() {
      // console.log(this.$options.data().obj)
      // this.obj = this.$options.data().obj
      Object.keys(this.obj).forEach((key) => {
        if (key === 'sex') {
          this.$set(this.obj, key, '1')
          return
        }
        this.$set(this.obj, key, '')
      })
      console.log(this.obj)
    }
  },
  computed: {},
  activated: {},
  watch: {
    // ary: function (oldval, newval) {
    //   console.log(oldval, newval)
    // }
    'obj.sex': function (oldval, newval) {
      console.log(oldval, newval)
    }
  },
  deactivated: {}
}
</script>
<style lang="less" scoped></style>
